<template>
  <div class="point-process">
    <div class="process-nodes">
      <div class="process-line"><i class="iconfont">&#xe603;</i></div>
      <div class="node" :class="{valid: ~~item.isPass}" v-for="(item, index) in processList" :key="index">
         <div class="status">{{item.jc}}</div>
         <div class="point"></div>
         <div class="time-chork">
           <p class="time">{{item.time}}</p>
           <p class="date">{{item.date}}</p>
         </div>  
      </div>
    </div>
      
  </div>
</template>

<script>
export default {
  name: 'pointProcess',
  props: {
    processList: {
      type: Array,
      default() {
        return [
          {
            jc: '受案',
            isPass: 1,
            time: '22:05',
            date: '2018-03-30'
          },
          {
            jc: '立案',
            isPass: 1,
            time: '22:05',
            date: '2018-03-30'
          },
          {
            jc: '侦查',
            isPass: 1,
            time: '22:05',
            date: '2018-03-30'
          },
          {
            jc: '结案',
            isPass: 1,
            time: '22:05',
            date: '2018-03-30'
          },
          {
            jc: '撤案',
            isPass: 1,
            time: '22:05',
            date: '2018-03-30'
          }
        ]
      }
    }
  },
  data() {
    return {
    }
  },
  components: {
  },
  filters: {
  },
  methods: {
  },
  computed: {
  },
  mounted() {
  },
  created() {
    // console.log(spotLinkImg)
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "../../assets/icons/iconfont.css";
.point-process {
  position:relative;
  .process-line{
    position:absolute;
    left:0; right:0;
    top:calc( 1rem * 3 + 5px);
    height:2px;
    background:#5279ab;
    z-index:-1;
    .iconfont{
      position:absolute;
      right:-6px;
      top:calc(-1rem + 3px);
      color:#5279ab;
      font-weight:700;
    }
  }
  .process-nodes{
    position:relative;
    width:100%;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content:space-around;
    z-index:3; 
    .node{
      display:block;
      flex: 0 1 auto;
      text-align:center;
      color:#5279ab;
      .status{
        line-height:3
      }
      .point{
        width:14px;
        height:14px;
        border:1px solid #5279ab;
        border-radius:50%;
        margin:0 auto;
        background:white;
        background-image:radial-gradient(circle 8px, #5279ab 50%, white 50%);
        z-index:3;
      }
      .time-chork{
        margin-top: 8px;
        font-size: 8px;
        p{
          margin:0;padding:0;
          line-height: 1.2;
        }
        
      }

    }.valid{
      color:black;
      .point{
        border:1px solid #aaaaaa;
        background-image:radial-gradient(circle 8px, #aaaaaa 50%, white 50%);
      }
    }
  }
}
</style>
